<!--  -->
<template>
  <div class="order-detail">
    <Nav title="订单详情">
      <template v-slot:right>
        <span class="msg"></span>
      </template>
      <template v-slot:left>
        <span class="back-icon" @click="$router.back()"></span>
      </template>
    </Nav>
    <!-- 订单状态 -->
    <div class="order-status-wrapper">
      <div class="order-status flex justify-between">
        <span class="f-18 color-white f-medium">{{orderDetail.order_status|orderStatus}}</span>
        <!-- 待付款 -->
        <div v-if="orderDetail.order_status==0">
          <div class="f-14 color-white text-left">剩余：{{timerCount}}</div>
          <div class="f-12 mt-6 color-white text-left">待付款：￥{{orderDetail.pay_money}}</div>
        </div>
        <!-- 待收货 -->
        <div class="f-14 color-white" v-if="orderDetail.order_status==2">8天5时自动确认收货</div>
      </div>
      <div class="bottom"></div>
      <div class="address f-14 f-medium">
        <template v-if="c_address()">
          <router-link tag="div" :to="{name:'addresslists',query:{order_no:orderDetail.order_no}}">
              <div class="flex aligin-center">
            <span class="address-icon mr-10"></span>
            <span class="mr-18">{{orderDetail.address.consigner}}</span>
            <span>{{orderDetail.address.mobile}}</span>
          </div>
          <div class="mt-14 line-22 ml-30">
            <span>{{orderDetail.address.alias}}</span>
          </div>
          </router-link>
        
        </template>
        <template v-else>
          <router-link class="color-orange f-15 f-bold pl-20" :to="{name:'addressadd',query:{order_no:orderDetail.order_no}}">
            你还未设置收货地址，请填写收货地址
            <span class="ml-8 right-arrow"></span>
          </router-link>
        </template>
      </div>
    </div>
    <router-link
      tag="div"
      :to="{name:'deliverDetail',params:{id:orderDetail.order_no}}"
      class="deliver flex justify-between"
      :class="[deliverFlag?'deliver-mask':'']"
      v-if="orderDetail.order_status!=0&&orderDetail.order_status!=1&&orderDetail.order_status!=5&&!orderDetail.qr_code"
    >
      <template v-if="deliverFlag">
        <div class="deliver-loading flex justify-center aligin-center">
          <van-loading type="spinner" color="#1989fa"/>
        </div>
      </template>
      <span class="deliver-icon"></span>
      <div class="f-14 f-medium ml-8 flex-1">
        <div class="ellipsis-line2 deliver-content">{{deliverInfo.detail[0].context}}</div>
        <div class="color-gray f-12">{{deliverInfo.detail[0].time}}</div>
      </div>
      <div class="arrow-right ml-18"></div>
    </router-link>
    <div class="divide-line"></div>
    <!-- 订单明细 -->
    <div class="order">
      <div class="f-15 f-bold">订单明细</div>
      <template v-for="(item,index) in orderDetail.goods.list">
        <div :key="index">
          <div class="flex justify-between mt-16 aligin-center">
            <img class="mr-10" :src="item.shop_logo" alt="">
            <span class="f-12 mr-auto">{{item.shop_name}}</span>
            <!-- <span class="btn flex aligin-center justify-center f-12" @click="showTel">联系商家</span> -->
          </div>
          <div class="mt-12 flex">
            <img class="product-img" :src="item.image" alt="">
            <div class="product-info ml-22">
              <div class="title ellipsis-line2 f-14">{{item.goods_name}}</div>
              <div class="color-gray f-14 mt-10">{{item.sku_name}}</div>
              <div class="mt-26 flex justify-between">
                <span class="f-14">￥{{item.price}}</span>
                <span class="f-12 color-gray">x{{item.num}}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <!-- <div class="flex flex-column product-price f-12">
      <span class="mt-8">
        共{{orderDetail.goods.count}}件商品
      </span>
      <div class="flex justify-between mt-12">
        <span>运费</span>
        <span>{{orderDetail.shipping_money=="包邮"?orderDetail.shipping_money:'￥'+orderDetail.shipping_money}}</span>
      </div>
      <div class="clear-fix mt-18">
        <div class="color-red float-r">
          合计￥
          <span class="f-14 ml-8">{{orderDetail.pay_money}}</span>
        </div>
      </div>
    </div>-->

    <div class="divide-line"></div>
    <!-- <div class="joinDetail-wrapper">
      <div class="tip flex">
        <span class="tip-bar"></span>
        <span>参与活动</span>
      </div>
      <router-link
        tag="div"
        :to="{name:'joindetail',params:{key:orderDetail.activity.key}}"
        class="attend-info flex aligin-center"
      >
        <img class="award-img mr-16" :src="orderDetail.activity.image" alt="">
        <div class="award-wrapper">
          <div class="send">本次购买赠送{{orderDetail.activity.give_power}}个活动号码</div>
          <div class="award-name ellipsis">{{orderDetail.activity.name}} <span class="color-gray">第{{orderDetail.activity.issue_id}}期</span> </div>
          <div class="progress-wrapper mt-10">
            <div class="progress" :style="{width:orderDetail.activity.progress+'%'}"></div>
          </div>
          <div class="flex mt-4 justify-between aligin-center w-180 f-14 pb-10 f-7">
            <div class="flex aligin-center">
              <span class="power"></span>
              <span>{{orderDetail.activity.current}}</span>
            </div>
            <div class="flex aligin-center">
              <span class="receive-count"></span>
              <span>{{orderDetail.activity.power}}</span>
            </div>
          </div>
        </div>
      </router-link>
    </div>
    <template v-if="orderDetail.order_status!=0&&orderDetail.order_status!=5">
      <div class="divide-line"></div>
      <div class="flex justify-between aligin-center luck-code">
        <span class="f-15 f-bold">兑换码</span>
        <span class="f-14">{{luckCode||orderDetail.numbers}}</span>
      </div>
    </template>
    <div class="divide-line"></div> -->
  
    <div class="padding" v-if="orderDetail.order_status==0">
      <div class="flex justify-between aligin-center" @click="paySelected(0)">
        <span class="alipay"></span>
        <span class="ml-10 f-14 mr-auto">支付宝(推荐使用)</span>
        <span :class="[payIndex==0?'pay-selected':'circle']"></span>
      </div>
      <div class="mt-22 flex justify-between aligin-center" @click="paySelected(1)">
        <span class="wx-pay"></span>
        <span class="ml-10 f-14 mr-auto">微信支付</span>
        <span :class="[payIndex==1?'pay-selected':'circle']"></span>
      </div>
      <div class="mt-22 flex justify-between aligin-center" @click="paySelected(2)">
        <span class="rest"></span>
        <span class="ml-10 f-14 mr-auto">余额支付</span>
        <span :class="[payIndex==2?'pay-selected':'circle']"></span>
      </div>
    </div>
      <div class="order-info f-12">
      <div class="f-15 f-bold">订单信息</div>
      <div class="mt-16">订单编号: {{orderDetail.order_no}}</div>
      <div class="mt-10">下单时间：{{orderDetail.create_time}}</div>
      <div class="mt-10">活动号码: 前往个人中心-活动记录查看</div>
    </div>
    <!-- 待付款 -->
    <div
      class="bottom-bar f-12 flex justify-between aligin-center"
      v-if="timerCount!='订单已关闭'&&orderDetail.order_status==0"
    >
      <!-- <router-link
        tag="div"
        :to="{name:'service',query:{shop_id:orderDetail.shop_id}}"
        class="flex aligin-center"
      >
        <span class="service"></span>
        <span class="ml-6">联系客服</span>
      </router-link>-->
      <div class="clear-fix flex-1">
         <div class="float-r">
        <span class="color-gray mr-6">共{{orderDetail.goods.count}}件商品</span>
        <span>订单金额合计：</span>
        <span class="color-orange">￥{{orderDetail.pay_money}}</span>
      </div>
      </div>
     
      <div class="flex f-14">
        <!-- <span class="btn-item flex justify-center aligin-center" @click="cancelOrder">取消订单</span> -->

        <span
          class="btn-item border-red flex justify-center aligin-center color-red ml-10"
          @click="payConfirm"
        >立即支付</span>
      </div>
    </div>
    <!-- 待发货 -->
    <div
      class="bottom-bar f-12 flex justify-between aligin-center"
      v-if="orderDetail.order_status==1"
    >
      <router-link
        tag="div"
        :to="{name:'service',query:{shop_id:orderDetail.shop_id}}"
        class="flex aligin-center"
      >
        <span class="service"></span>
        <span class="ml-6">联系客服</span>
      </router-link>
      <div class="flex f-14">
        <span
          class="btn-item border-red flex justify-center aligin-center color-red ml-10"
          @click="notify()"
        >{{orderDetail.qr_code?'查看券码':'提醒发货'}}</span>
      </div>
    </div>
    <!-- 待收货 -->
    <div
      class="bottom-bar f-12 flex justify-between aligin-center"
      v-if="orderDetail.order_status==2"
    >
      <router-link
        tag="div"
        :to="{name:'service',query:{shop_id:orderDetail.shop_id}}"
        class="flex aligin-center"
      >
        <span class="service"></span>
        <span class="ml-6">联系客服</span>
      </router-link>
      <div class="flex f-14">
        <router-link
          tag="span"
          :to="{name:'deliverDetail',params:{id:orderDetail.order_no}}"
          class="btn-item flex justify-center aligin-center"
        >查看物流</router-link>
        <span
          class="btn-item border-red flex justify-center aligin-center color-red ml-10"
          @click="orderCf"
        >确认收货</span>
      </div>
    </div>
    <!-- 待评价 -->
    <div
      class="bottom-bar f-12 flex justify-between aligin-center"
      v-if="orderDetail.order_status==3"
    >
      <router-link
        tag="div"
        :to="{name:'service',query:{shop_id:orderDetail.shop_id}}"
        class="flex aligin-center"
      >
        <span class="service"></span>
        <span class="ml-6">联系客服</span>
      </router-link>
      <div class="flex f-14">
        <span class="btn-item flex justify-center aligin-center" @click="refund">退换货</span>
        <span
          class="btn-item border-red flex justify-center aligin-center color-red ml-10"
          @click="evaluation"
        >评价</span>
      </div>
    </div>
    <!-- 已完成 -->
    <div
      class="bottom-bar f-12 flex justify-between aligin-center"
      v-if="orderDetail.order_status==4"
    >
      <router-link
        tag="div"
        :to="{name:'service',query:{shop_id:orderDetail.shop_id}}"
        class="flex aligin-center"
      >
        <span class="service"></span>
        <span class="ml-6">联系客服</span>
      </router-link>
      <div class="flex f-14">
        <span class="btn-item flex justify-center aligin-center" @click="orderDel">删除</span>
      </div>
    </div>
    <!-- 已关闭 -->
    <div
      class="bottom-bar f-12 flex justify-between aligin-center"
      v-if="orderDetail.order_status==5"
    >
      <router-link
        tag="div"
        :to="{name:'service',query:{shop_id:orderDetail.shop_id}}"
        class="flex aligin-center"
      >
        <span class="service"></span>
        <span class="ml-6">联系客服</span>
      </router-link>
      <div class="flex f-14">
        <span class="btn-item flex justify-center aligin-center" @click="orderDel">删除</span>
      </div>
    </div>
    <!-- 支付弹窗 -->
    <!-- <Pay :payFlag.sync="payFlag" @payConfirm="payConfirm" @closePay="payFlag=false"></Pay> -->
    <!-- 支付成功提示 -->
    <OrderConfirmTip
      :tipFlag.sync="tipFlag"
      :luckCode.sync="luckCode"
      @closeTip="tipConfirm"
      @tipConfirm="tipConfirm"
    ></OrderConfirmTip>
    <van-dialog v-model="qcodeFlag" title="消费券码" @confirm="closeDialog">
      <div class="flex aligin-center flex-column">
        <img class="coupon-img" :src="orderDetail.qr_code">
        <div class="mt-4">{{orderDetail.code}}</div>
        <div class="mt-4">共{{orderDetail.num}}张,仅支持一起核销</div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import {
  orderDetail,
  unifiedOrder,
  orderStatus,
  cancelOrder,
  orderDestroy,
  shippingStatus,
  orderConfirm,
  weLogin
} from "../../api/api";
import Pay from "../../components/Pay";
import OrderConfirmTip from "../../components/OrderConfirmTip";
import wxPay from "../../utils/wxPay";
import { Dialog } from "vant";
export default {
  name: "OrderDetail",
  components: { Nav, Pay, OrderConfirmTip },
  filters: {
    orderStatus: function(value) {
      switch (value) {
        case -1:
          return "退款中";
        case 0:
          return "等待您的付款";
        case 1:
          return "等待卖家发货";
        case 2:
          return "卖家已发货";
        case 3:
          return "物品已送到您手中";
        case 4:
          return "已完成";
        case 5:
          return "订单已关闭";
      }
    }
  },
  data() {
    return {
      payIndex: 0,
      areaIndex: 0,
      orderDetail: {
        order_no: "14",
        goods: { list: [] },
        activity: {},
        address: {}
      }, //订单详情
      timerCount: "",
      orderTimer: null,
      timer: null, //倒计时
      payFlag: false, //支付弹窗
      luckCode: "", //幸运号
      deliverFlag: true, //快递信息加载flag
      deliverInfo: { detail: [{}] }, //物流信息
      tipFlag: false, //订单成功提示,
      qcodeFlag: false,
      conponQcode: {},
      couponTimer: null
    };
  },
  computed: {},
  watch: {},
  methods: {
    showTel(){
      this.$dialog.alert({
        title:"客服电话",
        message: "4008771866"
    });
    },
    paySelected(index) {
      this.payIndex = index;
    },
    c_address() {
      return !(this.orderDetail.address instanceof Array);
    },
    closeDialog() {
      console.log("enter");
      if (this.couponTimer) {
        clearInterval(this.couponTimer);
        this.couponTimer = null;
      }
    },
    notify() {
      if (this.orderDetail.qr_code) {
        this.qcodeFlag = true;
        this.couponTimer = setInterval(() => {
          orderStatus({ order_no: this.orderDetail.order_no }).then(
            ({ data: { result } }) => {
              if (parseInt(result.order_status) != 1) {
                clearInterval(this.couponTimer);
                this.couponTimer = null;
                this.qcodeFlag = false;
                this.$set(
                  this.orderDetail,
                  "order_status",
                  result.order_status
                );
                this.$toast("核销成功");
              }
            }
          );
        }, 1000);
      } else {
        this.$notify("已提醒发货");
      }
    },
    tipConfirm() {
      this.tipFlag = false;
      this.$toast("购买成功，等待开奖");

      location.reload();
    },
    //评价
    evaluation() {
      this.$router.push({
        name: "evaluation",
        params: { id: this.$route.params.id }
      });
    },
    //确认收货
    orderCf() {
      Dialog.confirm({
        title: "提示",
        message: "确定收货吗？"
      })
        .then(() => {
          orderConfirm({ order_no: this.$route.params.id }).then(res => {
            this.$set(this.orderDetail, "order_status", 3);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 删除订单
    orderDel() {
      Dialog.confirm({
        title: "提示",
        message: "确定删除订单吗？"
      })
        .then(() => {
          orderDestroy({ order_no: this.$route.params.id }).then(res => {
            this.$router.back();
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //请求幸运码
    _requestLuckCode() {
      orderStatus({ order_no: this.$route.params.id }).then(
        ({ data: { result } }) => {
          if (result.order_status != 0) {
            // this.$set(this.orderDetail, "order_status", result.order_status);
            // this.payFlag = false;
            // this.tipFlag = true;
            // this.luckCode = result.numbers + "";
            this.$router.replace({name:"payConfirm"})
            clearInterval(this.orderTimer);
            this.orderTimer = null;
          }
        }
      );
    },
    // 取消订单
    cancelOrder() {
      Dialog.confirm({
        title: "提示",
        message: "确定取消订单吗？"
      })
        .then(() => {
          cancelOrder({ order_no: this.$route.params.id }).then(res => {
            this.$router.back();
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 退款
    refund() {
      this.$router.push({
        name: "refund",
        params: { id: this.$route.params.id }
      });
    },
    // 支付
    payConfirm() {
      let payType = 0;
      switch (this.payIndex) {
        case 0:
          //支付宝
          payType = 2;
          break;
        case 1:
          //微信
          payType = 1;
          break;
        case 2:
          //余额
          payType = 5;
          break;
      }
      let params = { order_no: this.$route.params.id, pay_type: payType };
      // if(this.orderDetail.activity.type&&this.orderDetail.activity.type==1){
      //   params=Object.assign({},params,{city_data_id:this.orderDetail.activity.cities[this.areaIndex].id})
      // }
      unifiedOrder(params).then(
        res => {
          if (payType == 1) {
            if (typeof WeixinJSBridge == "undefined") {
              if (document.addEventListener) {
                document.addEventListener(
                  "WeixinJSBridgeReady",
                  wxPay(res.data.result.config, res => {}),
                  false
                );
              } else if (document.attachEvent) {
                document.attachEvent(
                  "WeixinJSBridgeReady",
                  wxPay(res.data.result.config, res => {})
                );
                document.attachEvent(
                  "onWeixinJSBridgeReady",
                  wxPay(res.data.result.config, res => {})
                );
              }
            } else {
              wxPay(res.data.result.config, res => {
                this._requestLuckCode();
                this.orderTimer = setInterval(() => {
                  this._requestLuckCode();
                }, 1000);
              });
            }
          } else if (payType == 2) {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.indexOf("micromessenger") != -1) {
              if (
                ua.indexOf("iphone") != -1 ||
                ua.indexOf("ipad") != -1 ||
                ua.indexOf("ipod") != -1
              ) {
                this.$router.push({
                  name: "info",
                  params: { url: res.data.result.config }
                });
              } else {
                this.$router.push({
                  name: "info",
                  params: { url: res.data.result.config }
                });
              }
            } else {
              this.$router.push({
                name: "info",
                params: { url: decodeURIComponent(res.data.result.config) }
              });
            }
          } else {
            // this.luckCode = res.data.result[0].numbers + "";
            // this.$set(
            //   this.orderDetail,
            //   "order_status",
            //   res.data.result[0].order_status
            // );
            // this.payFlag = false;
            // this.tipFlag = true;
            this.$router.replace({name:"payConfirm"})
          }
        },
        res => {
          console.log("res");
          this.payFlag = false;
          if (res == "公众号微信账号尚未授权") {
            this.$dialog
              .confirm({
                message: "微信支付需要微信授权登入，请微信登入授权"
              })
              .then(() => {
                return weLogin({ from: "authorization" });
              })
              .then(res => {
                window.location.href = res.data.result;
              });
          }
        }
      );
    }
  },
  created() {},
  mounted() {
    orderDetail({ order_no: this.$route.params.id }).then(res => {
      this.orderDetail = res.data.result;
      if (res.data.result.order_status == 6) {
        this.$router.back();
        return;
      }
      let closeSecond = res.data.result.closed_at;
      if (closeSecond < 0) {
        this.timerCount = "订单已关闭";
      } else {
        let minute =
          Math.floor(closeSecond / 60) < 10
            ? "0" + Math.floor(closeSecond / 60)
            : Math.floor(closeSecond / 60);
        let second =
          closeSecond % 60 < 10 ? "0" + (closeSecond % 60) : closeSecond % 60;
        this.timerCount = minute + "分" + second + "秒";
      }
      this.timer = setInterval(() => {
        closeSecond--;
        if (closeSecond < 0) {
          this.timerCount = "订单已关闭";
          clearInterval(this.timer);
        } else {
          let minute =
            Math.floor(closeSecond / 60) < 10
              ? "0" + Math.floor(closeSecond / 60)
              : Math.floor(closeSecond / 60);
          let second =
            closeSecond % 60 < 10 ? "0" + (closeSecond % 60) : closeSecond % 60;
          this.timerCount = minute + "分" + second + "秒";
        }
      }, 1000);
      if (
        res.data.result.order_status != 0 &&
        res.data.result.order_status != 1 &&
        !res.data.result.qr_code &&
        res.data.result.order_status != 5
      ) {
        shippingStatus({ order_no: res.data.result.order_no, limit: 1 }).then(
          ({ data: { result } }) => {
            this.deliverInfo = result;
            this.deliverFlag = false;
          }
        );
      }
    });
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
    clearInterval(this.orderTimer);
    this.orderTimer = null;
    if (this.couponTimer) {
      clearInterval(this.couponTimer);
      this.couponTimer = null;
    }
  } //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
@import url("../../assets/style/mixin");
.f-15 {
  font-size: 15px;
}
.color-orange {
  color: orange;
  line-height: 70px;
  text-align: center;
}
.right-arrow {
  display: inline-block;
  width: 14px;
  height: 14px;
  .bg-image("../../assets/imgs/arrow-right-b");
  background-size: 100% 100%;
}
.order-detail {
  position: relative;
  padding-bottom: 48px;
  min-height: 100%;
  box-sizing: border-box;
  .msg {
    display: inline-block;
    width: 17px;
    height: 16px;
    .bg-image("../../assets/imgs/msg");
    background-size: 100% 100%;
  }
  .back-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    .bg-image("../../assets/imgs/back");
    background-size: 100% 100%;
  }
  .order-status-wrapper {
    position: relative;
    height: 168px;
    width: 100%;
    border-bottom: 1px solid #eaeaea;
    .order-status {
      padding: 21px 16px 0;
      height: 108px;
      box-sizing: border-box;
      .bg-image("../../assets/imgs/order-detail-bg");
      background-size: 100% 100%;
    }
    .text-left {
      text-align: left;
    }
    .address {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 100px;
      width: 345px;
      box-sizing: border-box;
      background: #fff;
      padding: 15px 23px 0 10px;
      border-radius: 5px;
    }

    .line-22 {
      line-height: 22px;
    }
    .address-icon {
      width: 18px;
      height: 18px;
      .bg-image("../../assets/imgs/address");
      background-size: 100% 100%;
    }
    .bottom {
      height: 60px;
    }
  }
  .joinDetail-wrapper {
    padding: 13px 0 18px 17px;
    .tip {
      font-size: 15px;
    }
    .tip-bar {
      margin-right: 11px;
      width: 3px;
      height: 15px;
      background: rgba(238, 99, 101, 1);
    }
  }
  .padding {
    padding: 16px 16px 27px;
    border-bottom:1px solid #EAEAEA;
    .tip {
      align-items: flex-end;
    }
    .close {
      width: 16px;
      height: 16px;
      .bg-image("../../assets/imgs/close-dialog");
      background-size: 100% 100%;
    }
    .alipay {
      width: 22px;
      height: 22px;
      background: url("../../assets/imgs/alipay.png");
      background-size: 100% 100%;
    }
    .wx-pay {
      width: 22px;
      height: 22px;
      background: url("../../assets/imgs/wx-pay.png");
      background-size: 100% 100%;
    }
    .rest {
      width: 22px;
      height: 22px;
      background: url("../../assets/imgs/rest.png");
      background-size: 100% 100%;
    }
    .circle {
      height: 19px;
      width: 19px;
      box-sizing: border-box;
      border: 1px solid rgba(88, 88, 88, 1);
      border-radius: 50%;
    }
    .pay-selected {
      height: 19px;
      width: 19px;
      .bg-image("../../assets/imgs/pay-selected");
      background-size: 100% 100%;
    }
  }

  .deliver {
    position: relative;
    padding: 20px 16px 20px 20px;
    height: 92px;
    line-height: 22px;
    box-sizing: border-box;
  }
  .deliver-mask {
    opacity: 0.3;
  }
  .deliver-loading {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
  }
  .deliver-icon {
    height: 20px;
    width: 20px;
    background: url("../../assets/imgs/deliver.png");
    background-size: 100% 100%;
  }
  .deliver-content {
    height: 34px;
    line-height: 17px;
  }
  .flex-1 {
    margin-right: 10px;
    flex: 1;
  }
  .arrow-right {
    align-self: center;
    height: 12px;
    width: 12px;
    .bg-image("../../assets/imgs/arrow-right-b");
    background-size: 100% 100%;
  }
  .order {
    padding: 15px 16px 20px;
    border-bottom: 1px solid #eaeaea;
    img {
      height: 20px;
      width: 20px;
      border-radius: 50%;
    }
    .btn {
      width: 59px;
      height: 21px;
      border: 1px solid rgba(232, 48, 56, 1);
      color: rgba(232, 48, 56, 1);
      border-radius: 5px;
    }
    .product-img {
      height: 93px;
      width: 93px;
      border-radius: 5px;
    }
    .product-info {
      flex: 1;
      .title {
        height: 36px;
        line-height: 18px;
      }
    }
  }
  .product-price {
    padding: 0 16px 11px;
  }
  .product-detail {
    padding: 0 16px;
    height: 44px;
  }
  .luck-code {
    padding: 0 14px 0 17px;
    height: 44px;
  }
  .order-info {
    padding: 15px;
    border-bottom: 1px solid #eaeaea;
  }
  .bottom-bar {
    padding: 0 16px;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 48px;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    z-index: 100;
    .flex-1{
      flex: 1;
    }
    .color-orange{
      color: #F35948;
    }
    .service {
      height: 16px;
      width: 16px;
      background: url("../../assets/imgs/tabBottom/serviceSelected.png");
      background-size: 100% 100%;
    }
    .btn-item {
      height: 35px;
      width: 76px;
      border: 1px solid rgba(188, 188, 188, 1);
      border-radius: 5px;
    }
    .border-red {
      border: 1px solid rgba(234, 55, 63, 1);
    }
  }
  .attend-info {
    margin-top: 16px;
    .award-img {
      flex-shrink: 0;
      width: 78px;
      height: 78px;
      border-radius: 50%;
    }
    .award-wrapper {
      padding-top: 6px;
      flex: 1;
    }
    .send {
      font-size: 12px;
      line-height: 19px;
      color: #ee6365;
    }
    .award-name {
      margin-top: 9px;
      width: 258px;
      height: 12px;
      font-size: 10px;
      line-height: 12px;
    }
    .power {
      display: inline-block;
      width: 17px;
      height: 17px;
      .bg-image("../../assets/imgs/power-red");
      background-size: 100% 100%;
    }
    .receive-count {
      display: inline-block;
      width: 15px;
      height: 15px;
      .bg-image("../../assets/imgs/receive-red");
      background-size: 100% 100%;
    }
  }
  .coupon {
    padding: 11px 17px 17px;
    color: #303030;
    font-size: 12px;
    .tip-color {
      color: #f65c44;
    }
    .area-label {
      margin-right: 9px;
      width: 41px;
      height: 18px;
      font-size: 9px;
      color: #ccc;
      background: url("../../assets/imgs/area-unselect.png");
      background-size: 100% 100%;
    }
    .area-select {
      width: 41px;
      height: 18px;
      font-size: 9px;
      color: #f65c44;
      background: url("../../assets/imgs/area-select.png");
      background-size: 100% 100%;
    }
  }
  .progress-wrapper {
    position: relative;
    width: 230px;
    height: 9px;
    background: #eee;
    border-radius: 3px;
  }
  .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    .bg-1();
  }
  .w-180 {
    width: 230px;
  }
}
.f-7 {
  font-size: 7px;
}
.coupon-img {
  width: 200px;
  height: 200px;
}
</style>